<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>文件上传下载</title>

    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!-- customize style -->

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="no-skin">
<div id="navbar" class="navbar navbar-default          ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">菜单</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="index.html" class="navbar-brand">
                <small>
                    <i class="fa fa-leaf"></i>
                    文件上传下载
                </small>
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav" style="text-align: right">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="assets/images/avatars/user.jpg" alt="Jason's Photo"/>
                        <span class="user-info">
									<small>欢迎,</small>
									管理员
								</span>
                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a id="logout" href="#">
                                <i class="ace-icon fa fa-power-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <div id="sidebar" class="sidebar                  responsive                    ace-save-state compact"
         data-sidebar="true" data-sidebar-scroll="true" data-sidebar-hover="true">
        <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {
            }
        </script>

        <div class="sidebar-shortcuts" id="sidebar-shortcuts">

        </div><!-- /.sidebar-shortcuts -->

        <ul class="nav nav-list" style="top: 0px;">
            <li class="active hover highlight">
                <a href="index.html">
                    <i class="menu-icon fa fa-tachometer"></i>
                    <span class="menu-text"> 文件上传下载 </span>
                </a>

                <b class="arrow"></b>
            </li>


        </ul><!-- /.nav-list -->
        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-save-state ace-icon fa fa-angle-double-left"
               data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="index.html">首页</a>
                    </li>
                    <li class="active">文件上传下载</li>
                </ul><!-- /.breadcrumb -->
            </div>

            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->


                        <div class="row">
                            <div class="col-sm-4">
                                <div class="widget-box">
                                    <div class="widget-header">
                                        <h4 class="widget-title">文件上传</h4>

                                        <div class="widget-toolbar">
                                            <a href="#" data-action="collapse">
                                                <i class="ace-icon fa fa-chevron-up"></i>
                                            </a>

                                            <a href="#" data-action="close">
                                                <i class="ace-icon fa fa-times"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="widget-body" style="height: 100px;">
                                        <div class="widget-main">
                                            <div class="form-group">
                                                <div class="col-xs-10">
                                                    <input type="file" id="id-input-file-2" name="file"/>
                                                </div>
                                                <div class="col-xs-2">
                                                    <button id="fileUpload" class="btn btn-xs btn-info"
                                                            type="button">
                                                        上传
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <div class="widget-box">
                                    <div class="widget-header">
                                        <h4 class="widget-title">最新文件</h4>

                                        <div class="widget-toolbar">
                                            <a href="#" data-action="collapse">
                                                <i class="ace-icon fa fa-chevron-up"></i>
                                            </a>

                                            <a href="#" data-action="close">
                                                <i class="ace-icon fa fa-times"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <table id="fileTable" class="table  table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>文件名</th>
                                                    <th>文件大小</th>
                                                    <th>文件类型</th>
                                                    <th>原始文件名</th>
                                                    <th>创建时间</th>
                                                    <th></th>
                                                </tr>
                                                </thead>

                                                <tbody>


                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">sutaotao</span>
							文件上传下载 &copy; 2020
						</span>
                &nbsp; &nbsp;
            </div>
        </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->

<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>

<script src="assets/js/bootbox.js"></script>
<!-- customize js -->
<script type="text/javascript">
    $().ready(function () {
        $.ajax({
            url: 'file/newinfo.action',
            dataType: 'json',
            type: 'GET',
            async: false,
            data: "num=" + 10,
            processData: false,
            success: function (list) {
                for (var i = 0; i < list.length; i++) {
                    addTable(list[i]);
                    deleteTable();
                }
            },
            error: function (response) {
                console.log(response);
            }
        });
    });

    jQuery(function ($) {
        $('#id-input-file-1 , #id-input-file-2').ace_file_input({
            no_file: '未选择文件 ...',
            btn_choose: '选择',
            btn_change: '修改',
            droppable: false,
            onchange: null,
            thumbnail: false //| true | large
            //whitelist:'gif|png|jpg|jpeg'
            //blacklist:'exe|php'
            //onchange:''
            //
        });
        //pre-show a file name, for example a previously selected file
        //$('#id-input-file-1').ace_file_input('show_file_list', ['myfile.txt'])
        $('#fileUpload').click(function () {
            var formData = new FormData();
            formData.append("file", $('#id-input-file-2')[0].files[0]);
            if (formData.get("file").size <= 0) {
                alert("请选择文件")
            } else if (formData.get("file").size > 5 * 1024 * 1024) {
                alert("请选择5MB以下的文件")
            } else if (formData.get("file").size > 0) {
                $.ajax({
                    url: 'upload.action',
                    dataType: 'json',
                    type: 'POST',
                    async: false,
                    data: formData,
                    processData: false,
                    contentType: false, // 不要设置Content-Type请求头
                    success: function (name) {
                        // console.log(data);
                        if (typeof name == "undefined" || name == null || name == "") {
                            alert('上传失败！');
                        } else {
                            alert("上传成功！");
                            location.reload(true);
                        }

                    },
                    error: function (response) {
                        console.log(response);
                    }
                });

            }

        });

    });

    function deleteTable() {
        var long = document.getElementById("fileTable").rows.length;
        while (long > 10) {
            //我这是判断了一下tr数量，至少保留10行
            var nodes = document.getElementById("fileTable").childNodes[0].childNodes;
            document.getElementById("fileTable").deleteRow(0);
            long--;
        }
    }

    function fileInfoAppend(name) {
        $.ajax({
            url: 'file/info.action',
            dataType: 'json',
            type: 'GET',
            async: false,
            data: "name=" + name,
            processData: false,
            success: function (data) {
                addTable(data);
                deleteTable();
            },
            error: function (response) {
                console.log(response);
            }
        });
    }

    function addTable(data) {
        var oTbody = $("#fileTable tbody");
        var oTr = document.createElement('tr');     //创建TR
        oTr.innerHTML = "" +
            "                                                        <td>" + data.name + "</td>\n" +
            "                                                        <td>" + data.size + "</td>\n" +
            "                                                        <td>" + data.type + "</td>\n" +
            "                                                        <td>" + data.originalName + "</td>\n" +
            "                                                        <td>" + dateFormat(data.creationTime) + "</td>\n" +
            "                                                        <td class=\"center\">\n" +
            "                                                        <button class=\"btn btn-xs btn-info\"\n" +
            "                                                                onclick=\"download('" + data.name + "')\">\n" +
            "                                                            下载\n" +
            "                                                        </button>" +
            "                                                        </td>\n";
        oTbody.append(oTr);
    }

    function download(name) {
        window.open("download.action?fileName=" + name);
    }

    /* * 时间格式化工具
* 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期
*/
    function datetimeFormat(longTypeDate) {
        var dateTypeDate = "";
        var date = new Date();
        date.setTime(longTypeDate);
        dateTypeDate += date.getFullYear(); //年
        dateTypeDate += "-" + getMonth(date); //月
        dateTypeDate += "-" + getDay(date); //日
        dateTypeDate += " " + getHours(date); //时
        dateTypeDate += ":" + getMinutes(date);  //分
        dateTypeDate += ":" + getSeconds(date);  //分
        return dateTypeDate;
    }

    /*
     * 时间格式化工具
     * 把Long类型的1527672756454日期还原yyyy-MM-dd格式日期
     */
    function dateFormat(longTypeDate) {
        var dateTypeDate = "";
        var date = new Date();
        date.setTime(longTypeDate);
        dateTypeDate += date.getFullYear(); //年
        dateTypeDate += "-" + getMonth(date); //月
        dateTypeDate += "-" + getDay(date); //日
        return dateTypeDate;
    }

    //返回 01-12 的月份值
    function getMonth(date) {
        var month = "";
        month = date.getMonth() + 1; //getMonth()得到的月份是0-11
        if (month < 10) {
            month = "0" + month;
        }
        return month;
    }

    //返回01-30的日期
    function getDay(date) {
        var day = "";
        day = date.getDate();
        if (day < 10) {
            day = "0" + day;
        }
        return day;
    }

    //小时
    function getHours(date) {
        var hours = "";
        hours = date.getHours();
        if (hours < 10) {
            hours = "0" + hours;
        }
        return hours;
    }

    //分
    function getMinutes(date) {
        var minute = "";
        minute = date.getMinutes();
        if (minute < 10) {
            minute = "0" + minute;
        }
        return minute;
    }

    //秒
    function getSeconds(date) {
        var second = "";
        second = date.getSeconds();
        if (second < 10) {
            second = "0" + second;
        }
        return second;
    }
</script>
<!-- inline scripts related to this page -->
</body>
</html>
